<template>
  <div>
    <a-row type="flex" class="header">
      <a-col :span="10" class="header-row header-row1">
        <div class="header-title">终端概况</div>

        <div
          class="header-content header-content1"
          style="justify-content: space-between"
        >
          <CardItem
            icon="desktop"
            content="受管控终端"
            icon-bg="#32527e"
            icon-color="#bfdef7"
          >
            <span class="fz-20">0</span>
          </CardItem>
          <div>
            <div class="u-flex u-align-center">
              <a-icon type="hdd" style="color: #3b84d1"></a-icon>
              <span style="color: #6479a0; line-height: 14px"
                >服务器终端：0</span
              >
            </div>
            <div class="u-flex u-align-center" style="margin-top: 6px">
              <a-icon type="desktop" style="color: #3b84d1"></a-icon>
              <span style="color: #6479a0; line-height: 14px">PC终端：0</span>
            </div>
          </div>
          <div>
            <div class="u-flex u-align-center">
              <span class="green-circle"></span>
              <span style="color: #6479a0">在线：0</span>
            </div>
            <div class="u-flex u-align-center">
              <span class="gray-circle"></span>
              <span style="color: #6479a0">离线：0</span>
            </div>
          </div>
          <CardItem
            icon="alert"
            content="未管控终端"
            icon-bg="#32527e"
            icon-color="#bfdef7"
          >
            <template #icon>
              <img
                style="width: 20px; height: 20px"
                src="../../assets/ternimal.png"
                alt=""
              />
            </template>
            <span class="fz-20">0</span>
          </CardItem>
        </div>
      </a-col>
      <a-col :span="9" class="header-row header-row2">
        <div class="header-title">最近七天工作情况</div>
        <div
          class="header-content"
          style="display: flex; justify-content: space-between"
        >
          <CardItem
            icon="alert"
            content="累计防御攻击"
            icon-bg="#32527e"
            icon-color="#bfdef7"
          >
            <template #icon>
              <img
                style="width: 20px; height: 20px"
                src="../../assets/dunpai.png"
                alt=""
              />
            </template>
            <span class="fz-18">0</span><span>次</span>
          </CardItem>
          <CardItem
            icon="monitor"
            content="累计查杀"
            icon-bg="#32527e"
            icon-color="#bfdef7"
          >
            <span class="fz-18">0</span><span>次 </span>
          </CardItem>
          <CardItem
            icon="file-exclamation"
            content="处理威胁文件"
            icon-bg="#32527e"
            icon-color="#bfdef7"
          >
            <span class="fz-18">0</span><span>个 </span>
          </CardItem>
          <CardItem
            icon="alert"
            content="隔离终端"
            icon-bg="#32527e"
            icon-color="#bfdef7"
          >
            <template #icon-wrap>
              <img
                style="
                  width: 32px;
                  height: 32px;
                  margin-right: 10px;
                  border-radius: 6px;
                  overflow: hidden;
                "
                src="../../assets/main.png"
                alt=""
              />
            </template>
            <span class="fz-18">0</span><span>台 </span>
          </CardItem>
        </div>
      </a-col>
      <a-col :span="5" class="header-row header-row3">
        <div class="header-title">
          <span>设备状态</span>
          <span>详情</span>
        </div>
        <div
          class="header-content"
          style="display: flex; justify-content: space-between"
        >
          <a-progress
            type="circle"
            :width="60"
            :strokeWidth="6"
            :percent="21.5"
            strokeColor="#a1bcdb"
          >
            <template #format>
              <span style="color: #a1acf6"> 21.5% </span>
              <div style="color: #7684a4">CPU</div>
            </template>
          </a-progress>
          <a-progress
            type="circle"
            :percent="26.9"
            :width="60"
            :strokeWidth="6"
            strokeColor="#a1bcdb"
          >
            <template #format>
              <span style="color: #a1acf6"> 26.9% </span>
              <div style="color: #7684a4">内存</div>
            </template>
          </a-progress>
          <a-progress
            type="circle"
            :percent="12.6"
            :width="60"
            :strokeWidth="6"
            strokeColor="#a1bcdb"
          >
            <template #format>
              <span style="color: #a1acf6">12.6% </span>
              <div style="color: #7684a4">硬盘</div>
            </template>
          </a-progress>
        </div>
      </a-col>
    </a-row>
    <div class="main-content">
      <a-row :gutter="16" type="flex">
        <a-col :span="12" style="height: auto">
          <u-card title="待处理高危事件">
            <a-row :gutter="16" type="flex">
              <a-col :span="8" style="height: auto; margin: 30px 0 15px">
                <CardItem
                  icon="dollar"
                  title="高危事件"
                  content="勒索病毒/影响终端"
                  icon-bg="#e0ecf5"
                  icon-color="#3b84d1"
                >
                  <span class="fz-20">0</span><span>个/0台 </span>
                </CardItem>
              </a-col>
              <a-col :span="8" style="height: auto; margin: 30px 0 15px">
                <CardItem
                  icon="unlock"
                  content="暴力破解/影响终端"
                  icon-bg="#e0ecf5"
                  icon-color="#3b84d1"
                >
                  <span class="fz-20">0</span><span>个/0台 </span>
                </CardItem>
              </a-col>
              <a-col :span="8" style="height: auto; margin: 30px 0 15px">
                <CardItem
                  icon="alert"
                  content="僵尸网络/影响终端"
                  icon-bg="#e0ecf5"
                  icon-color="#3b84d1"
                >
                  <template #icon>
                    <img
                      style="width: 20px; height: 20px"
                      src="../../assets/heike.png"
                      alt=""
                    />
                  </template>
                  <span class="fz-20">0</span><span>个/0台 </span>
                </CardItem>
              </a-col>
            </a-row>
            <a-row :gutter="16" type="flex">
              <a-col :span="8" style="height: auto; margin: 30px 0 15px">
                <CardItem
                  icon="code"
                  content="WebShell后门/影响终端"
                  icon-bg="#e0ecf5"
                  icon-color="#3b84d1"
                >
                  <span class="fz-20">0</span><span>个/0台 </span>
                </CardItem>
              </a-col>
              <a-col :span="8" style="height: auto; margin: 30px 0 15px">
                <CardItem
                  icon="bug"
                  content="高危漏洞/影响终端"
                  icon-bg="#e0ecf5"
                  icon-color="#3b84d1"
                >
                  <span class="fz-20">0</span><span>个/0台 </span>
                </CardItem>
              </a-col>
            </a-row>
          </u-card>
        </a-col>
        <a-col :span="12" style="height: auto">
          <u-card title="勒索病毒防御">
            <a-row :gutter="16" type="flex">
              <a-col
                :span="11"
                style="height: auto; margin: 30px 0 15px"
                class="flex-center"
              >
                <div class="dun-box">
                  <div class="dun-wrap">
                    <div class="dun-wrap-box">
                      <img src="../../assets/dun.png" class="dun-pic" alt="" />
                    </div>
                  </div>
                </div>
                <div style="width: 160px">
                  <div class="row-line row-line1">
                    <div class="row-line-wrap">
                      <a-icon type="monitor" style="color: #00bfa5"></a-icon>
                      4层勒索入侵预防
                    </div>
                  </div>
                  <div class="row-line row-line2">
                    <div class="row-line-wrap">
                      <a-icon type="safety-certificate" style="color: #00bfa5"></a-icon>
                      6级勒索反加密防护
                    </div>
                  </div>
                  <div class="row-line row-line3">
                    <div class="row-line-wrap">
                      <a-icon type="alert" style="color: #00bfa5"></a-icon>
                      6项勒索检测与响应机制
                    </div>
                  </div>
                </div>
              </a-col>
              <a-col :span="13">
                <a-row :gutter="15" type="flex">
                  <a-col :span="12" style="height: auto; margin: 30px 0 15px">
                    <CardItem
                      icon="dollar"
                      content="已处理勒索病毒"
                      icon-bg="#e5eaec"
                      icon-color="#8395b2"
                    >
                      <span class="fz-20">0个 </span>
                    </CardItem>
                  </a-col>
                  <a-col :span="12" style="height: auto; margin: 30px 0 15px">
                    <CardItem
                      icon="file-unknown"
                      content="已阻止可疑勒索行为"
                      icon-bg="#e5eaec"
                      icon-color="#8395b2"
                    >
                      <span class="fz-20">0次</span>
                    </CardItem>
                  </a-col>
                </a-row>
                <a-row :gutter="15" type="flex">
                  <a-col :span="12" style="height: auto; margin: 30px 0 15px">
                    <CardItem
                      icon="disconnect"
                      content="已阻止未知进程操作"
                      icon-bg="#e5eaec"
                      icon-color="#8395b2"
                    >
                      <span class="fz-20">0次</span>
                    </CardItem>
                  </a-col>
                  <a-col :span="12" style="height: auto; margin: 30px 0 15px">
                    <CardItem
                      icon="unlock"
                      content="已阻止暴力破解攻击"
                      icon-bg="#e5eaec"
                      icon-color="#8395b2"
                    >
                      <span class="fz-20">0次</span>
                    </CardItem>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </u-card>
        </a-col>
      </a-row>
      <u-card title="告警事件" style="height: auto">
        <template #right>
          <a-select v-model="type" style="width: 100px">
            <a-select-option value="a">最近7天</a-select-option>
            <a-select-option value="b">最近30天</a-select-option>
          </a-select>
        </template>
        <a-table
          :columns="eventColumns"
          :data-source="eventData"
          :pagination="false"
          :loading="loading"
        >
          <span slot="requestId" slot-scope="row">
            <div>{{ row.affected_terminal_id }}</div>
            <div class="flex">
              <span
                class="tag"
                :class="{
                  high: row.level === '高威胁',
                }"
                >{{ row.level }}</span
              >
              <span class="badge">{{ row.has_virus }}</span>
            </div>
          </span>
        </a-table>
      </u-card>
    </div>
  </div>
</template>

<script>
import { mockEvent } from "@/config/ternimal/data/app";
import CardItem from "./components/card-item.vue";

export default {
  data() {
    return {
      trackfficData: mockEvent,
      type: "a",
      trackfficColumns: [
        {
          title: "流量统计",
          key: "traffic",
          width: 240,
          dataIndex: "traffic",
          customRender(text) {
            return text[0] || "-";
          },
        },
        {
          title: "",
          key: "traffic1",
          dataIndex: "traffic",
          width: 140,
          customRender(text) {
            return text[1] || "-";
          },
        },
        {
          title: "TCP协议分布（BPS）",
          key: "TCP_protocol_distribution_BPS",
          dataIndex: "TCP_protocol_distribution_BPS",
          customRender(text) {
            return text || "-";
          },
        },
        {
          title: "UDP协议分布（BPS）",
          key: "UDP_protocol_distribution_BPS",
          dataIndex: "UDP_protocol_distribution_BPS",
          customRender(text) {
            return text || "-";
          },
        },
        {
          title: "ICMP（BPS）",
          key: "ICMP_BPS",
          dataIndex: "ICMP_BPS",
          customRender(text) {
            return text || "-";
          },
        },
      ],
      eventData: mockEvent,
      eventColumns: [
        {
          title: "序号",
          key: "index",
          dataIndex: "index",
        },
        {
          title: "威胁事件",
          key: "requestId",
          scopedSlots: { customRender: "requestId" },
        },
        {
          title: "影响终端",
          key: "affected_terminal_id",
          dataIndex: "affected_terminal_id",
        },
        {
          title: "感染文件",
          key: "infected_file",
          dataIndex: "infected_file",
        },
        {
          title: "发现时间",
          key: "discovery_time",
          dataIndex: "discovery_time",
        },
        {
          title: "处理状态",
          key: "handling_status",
          dataIndex: "handling_status",
        },
      ],
      loading: false,
    };
  },
  components: { CardItem },
};
</script>

<style lang="scss">
.app-home .app-main {
  background: none;
  padding: 0;
  margin: 0;
  width: 100%;
  border-radius: 0;
}
</style>

<style lang="scss" scoped>
.app-home {
  background: none;
  padding: 0;
  margin: 0;
  width: 100%;
  border-radius: 0;

  .u-card {
    margin-bottom: 20px;
    height: calc(100% - 20px);
  }

  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 8px 16px;
  }

  .tag {
    margin-right: 4px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 11px;
    color: #fff;
    padding: 4px 6px;
    background-color: #ff8c2f;

    &.high {
      background-color: #ff4d4f;
    }
  }

  .badge {
    margin-right: 4px;
    border-radius: 12px;
    font-size: 11px;
    color: #ff4d4f;
    padding: 0 4px;
    border: 1px solid #ff4d4f;
    background: #ffe9e4;
  }
}

.fz-20 {
  font-size: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background: #213761;
  padding: 10px 20px 20px;

  .header-title {
    color: #5378a6;
    font-size: 14px;
    padding: 4px 20px 4px 20px;
    display: flex;
    justify-content: space-between;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 4px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #5378a6;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.main-content {
  padding: 0 20px;
}

.header-content {
  padding-left: 20px;
  padding-right: 30px;
  position: relative;
  margin-top: 2px;
  display: flex;
  align-items: center;
  color: #9cbcd6;

  :deep .card-item .content {
    color: #6479a0;
  }

  &::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 2px;
    height: 40px;
    background-image: linear-gradient(to bottom, #35497d, #2b3f6d);
  }
}

.header-row:first-child .header-content::after {
  display: none;
}

.flex-center {
  display: flex;
  align-items: center;
}

.header-row2 :deep .card-item {
  .icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 18px;
  }
}

.fz-18 {
  font-size: 18px;
}

.green-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00bfa5;
  margin-right: 4px;
}

.gray-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #9cbcd6;
  margin-right: 4px;
}

.dun-box {
  margin-right: 10px;
  border-radius: 50%;
  position: relative;
  z-index: 10;
  border: 10px solid #fff;
}
.dun-wrap {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  padding: 6px;
  // 渐变边框 从a0b1ec到dbe6f9
  background: linear-gradient(135deg, #a0b1ec, #dbe6f9);
  flex-shrink: 0;

  .dun-wrap-box {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dun-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.row-line {
  display: flex;
  align-items: center;
  margin-top: 15px;
  color: #9cbcd6;
  position: relative;
  height: 30px;

  &:first-child {
    margin-top: 0;
  }
}

.row-line-wrap {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  background-image: linear-gradient(to right, #f4f7fe, #ffffff);
  padding-left: 12px;
  left: -38px;
  width: 210px;
  padding-left: 39px;
}

.row-line2 .row-line-wrap {
  left: -5px;
  width: 177px;
  padding-left: 6px;
}
</style>
